<template>
    <div class="mui-numbox" data-numbox-step='1' data-numbox-min='1'>
        <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
        <input ref="cartNum" class="mui-numbox-input" type="number" :value="itemCount" readonly="readonly"
               @change="updateCarShoptNum"/>
        <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
    </div>
</template>

<script>
    import mui from "../../lib/mui-master/dist/js/mui.min"

    export default {
        name: "numbox",
        data() {
            return {
                cartNum: null,
            }
        },
        methods: {
            // 更改当前商品在购物车中需要购买的数量
            updateCarShoptNum() {
                let shopNum = parseInt(this.$refs.cartNum.value);
                // { shopId: 商品ID, shopNum: 更改后的数量 }
                let shop = {shopId: this.shopItemId, shopNum};
                this.$store.commit("updateShopNum",shop)

                // 当更改当前商品购买数量的时候重新从本地存储中取出最新的勾选商品总价
                this.$emit("selectedTotalPrice");
            }
        },

        // 最大购买数量  当前商品购入购物车的数量  当前商品ID
        props: ["maxVal", "itemCount", "shopItemId"],
        // 监听可购买数量的最大值（原因已经说过 ImgContent.vue 和 CommodityInfo.vue都有说明）
        watch: {
            'maxVal': function (newVal, oldVal) {
                // console.log(newVal + '---------' + oldVal);
                if (newVal != undefined) {
                    mui(".mui-numbox").numbox().setOption('max', newVal)
                }
            }
        },
        mounted() {
            this.cartNum = this.$refs.cartNum;
            mui.init();
            mui(".mui-numbox").numbox()
        }
    }
</script>

<style scoped>

</style>